<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Users</title>
<script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	function deleteUser(id) {
		if (confirm("Are you sure?")) {
			$.ajax({
				url : '../users/delete/' + id,
				success : function(data) {
					alert('Entry deleted');
					$('#content').load('users.html');
				}
			});
		}
	}
	$(document)
			.ready(
					function() {
						$
								.ajax({
									url : '../users/read',
									success : function(data) {
										var objectData = jQuery.parseJSON(data);
										var transformedData = new Array();

										$
												.each(
														data,
														function(index, value) {
															var ops = '<a href="#" onclick=javascript:deleteUser('
																	+ value.id
																	+ ')>Delete</a> <a href="#">Edit</a>';
															transformedData[index] = {
																id : value.id,
																username : value.username,
																Operations : ops
															}
														});

										$('#DynamicGrid').append(
												CreateTableView(
														transformedData,
														"lightPro", true))
												.fadeIn();
									}
								});
						$('#DynamicGridLoading').hide();

					});
</script>

</head>
<body>
	<h1>Users</h1>
	<form id="form1">
		<div id="DynamicGrid">
			<div id="DynamicGridLoading">
				<img src="images/loading.gif" /><span> Loading Data... </span>
			</div>
		</div>
	</form>
</body>
</html>
